<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Add new post &laquo; Admin</title>
  <link rel="stylesheet" href="/admin/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/admin/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="/admin/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="/admin/assets/css/admin.css">
  <script src="/admin/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
   {{include '../common/header.html'}}
    <div class="container-fluid">
      <div class="page-title">
        <h1>添加文章</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form enctype="multipart/form-data" class="row" action="/admin/addArticle" method="post">
        <div class="col-md-7">
          <div class="form-group">
            <label for="title">作者</label>
            <input name="author" id="author" class="form-control input-lg" type="text" value="{{@userInfo._id}}" readonly>
          </div>
          <div class="form-group">
            <label for="title">标题</label>
            <input name="title" id="title" class="form-control input-lg" type="text" placeholder="文章标题">
          </div>
          <hr>
          <div class="form-group">
            <label for="container">内容</label>
            <script id="container" name="content" type="text/plain"></script>
          </div>
        </div>
        <div class="col-md-5">
          <div class="form-group">
            <label for="feature">文章封面</label>
            <!-- show when image chose -->
            <input id="feature" type="file" class="form-control" name="cover" onchange="previewFile()">
            <img src="" height="150" width="300" alt="请上传图片..."/>
          </div>
          <hr>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="classify">
              <option>请选择</option>
              {{each category}}
              <option value="{{@$value._id}}">{{$value.title}}</option>
              {{/each}}
            </select>
          </div>
          <hr>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input name="publishDate" id="created" class="form-control" type="date">
          </div>
          <hr>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="state">
              <option>请选择</option>
              <option value="0">草稿</option>
              <option value="1">发布</option>
            </select>
          </div>
          <hr>
          <div class="form-group">
            <button class="btn btn-primary" type="submit">保存</button>
            <button class="btn btn-primary" type="reset">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  {{include '../common/leftMenu.html'}}
  <script src="/admin/assets/vendors/jquery/jquery.js"></script>
  <script src="/admin/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <!-- 配置文件 -->
  <script type="text/javascript" src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.config.js"></script>
  <!-- 编辑器源码文件 -->
  <script type="text/javascript" src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.all.min.js"></script>
  <!-- 实例化编辑器 -->
  <script type="text/javascript">
    let ue = UE.getEditor('container');
  </script>
  <script>NProgress.done()</script>
  <script>
    function previewFile() {
      let preview = document.querySelector('img');
      let file  = document.querySelector('input[type=file]').files[0];
      let reader = new FileReader();
      reader.onloadend = function () {
        preview.src = reader.result;
      }
      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }
  </script>
</body>
</html>
